<template>
	<div>
		<div>
			<div style="width: 1200px;margin:0 auto;
				height: 90px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20px;
				box-sizing: border-box;">

				<div style="display: flex;align-items: center;">
					<div>
						<img src="../assets/logo.png" alt="" style="width:50px;height:24px;">
					</div>
					<div style="width: 1px;height: 24px;margin: 0 22px 0 5px;background: #D8D8D8;"></div>
					<div style="font-size: 16px;color: #454D5A;">让选品更简单！</div>
				</div>
				<div>
					<img src="../assets/images/ico-bg.png" alt="" style="width: 280px;height: 70px">
				</div>
			</div>
			<div class="box-hone" >
				<div style="width: 572px;">
					
				</div>
				<div style="width: 376px;
					height: 469px;
					background: rgba(255, 255, 255, 0.85);
					backdrop-filter: blur(10px);
					border-radius: 10px;
					font-size: 14px;">
					<div v-if="loginMethod=='pc'">
            <div v-if="loginType">
              <div style="height: 81px;display: flex;justify-content: space-between;border-bottom: 1px solid #d8d8d8;">
							<div style="padding: 20px 0 0 28px;font-size: 16px;color: #000;line-height: 60px;">微信扫码登录/注册</div>
							<div>
								<img src="../assets/images/computer-ico.png" alt="" class="login-choice-img" style="width:70px;height:70px;" v-if="loginType" @click="loginType= false">
                <img src="../assets/images/scanCode-ico.png" alt="" class="login-choice-img" style="width:70px;height:70px;" v-if="!loginType" @click="loginType= true">
							</div>
						</div>
						<div style="height: 321px;overflow: hidden;">
							<div style="width: 200px;position: relative;
								height: 200px;
								margin: 37px auto 15px;
								box-sizing: border-box;
								background: #fff;
								border: 1px solid #f4f4f4;display: flex;align-items: center;
								justify-content: center;"  >
									<img :src="qrCodeImgUrl" alt="" style="width:170px;height:170px;">
									<!-- <div ref="qrCodeUrl"></div> -->
									<!-- background: rgba(192,192,192, 0.8); -->
									<div style="width: 200px;
										height: 200px;
										background: rgba(192,192,192, 0.8); 
										display: flex;align-items: center;
										justify-content: center;position: absolute;
										top: 0;
										left: 0;" v-if="beoOverdue">
											<div style="cursor: pointer;" @click="getOneQRCode()">
												<span style="color: #409EFF;">二维码已失效</span>
												<span style="color: #409EFF;padding-left:10px;">刷新</span>
												<i class="el-icon-refresh" style="color: #409EFF;"></i>
											</div>
									</div>
								</div>
							
							<div style="width: 190px;
								margin: 0 auto;
								font-size: 14px;
								color: #82868f;
								text-align: center;">
								微信扫码关注“亿品悦动”
								<br />
								登录/注册
							</div>
						</div>
						<div style="height: 67px;
							box-sizing: border-box;
							padding-top: 15px;
							color: rgba(0, 0, 0, 0.65);
							letter-spacing: 0;
							text-align: center;
							line-height: 22px;">
							扫码即视为同意 <a href="" target="_blank" style="color: #1e6fff;text-decoration: none;cursor: pointer">《亿品悦动用户协议》</a>
						</div>
            </div>
			      <div v-else>
              <div style="height: 81px;display: flex;justify-content: space-between;border-bottom: 1px solid #d8d8d8;">
							<div style="padding: 20px 0 0 28px;font-size: 16px;color: #000;line-height: 60px;">账号密码登录</div>
							<div>
								<img src="../assets/images/computer-ico.png" alt="" class="login-choice-img" style="width:70px;height:70px;" v-if="loginType" @click="loginType= false">
                <img src="../assets/images/scanCode-ico.png" alt="" class="login-choice-img" style="width:70px;height:70px;" v-if="!loginType" @click="loginType= true">
							</div>
              <el-card class="login-form-layout">
			<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">

				<h2 class="login-title color-main">
					亿品悦动
				</h2>
				<el-form-item prop="mobile">
					<el-input name="username" type="text" v-model="loginForm.mobile" autoComplete="on"
						placeholder="请输入手机号" clearable>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin"
						v-model="loginForm.password" autoComplete="on" placeholder="请输入密码" clearable show-password>
					</el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 40px; display: flex;flex-direction: row;justify-content: center;">
					<el-button style="width: 100%;" type="primary" :loading="loading"
						@click.native.prevent="handleLogin">
						登录
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>

						</div>
			
			
		
            </div>
					</div>
					<div v-else>
						<div style="height: 81px;display: flex;justify-content: space-between;border-bottom: 1px solid #d8d8d8;">
							<div style="padding: 20px 0 0 28px;font-size: 16px;color: #000;line-height: 60px;">微信扫码登录/注册</div>
						</div>
						<div style="height: 321px;overflow: hidden;">
							<div style="padding: 30px 28px 0;">
								<div style="color: #EB7D00;font-size: 12px;height: 18px;margin-bottom:16px;">请绑定手机号，以便我们更好的为您提供服务</div>
								<div>
									<el-form ref="bindingPhone" :rules="bindingPhoneRules" :model="bindingPhone">
										<el-form-item prop="phoneNum" :rules="bindingPhoneRules.phoneNum" ref="phone">
											<el-input  v-model="bindingPhone.phoneNum" placeholder="请输入手机号码"></el-input>
										</el-form-item>
										<el-form-item prop="checkCode">
											<div style="display: flex;">
												<el-input  v-model="bindingPhone.checkCode" placeholder="手机验证码"></el-input>
												<div style="width:10px;"></div>
												<el-button @click.prevent="removeDomain('bindingPhone')" type="primary" plain :disabled="disableCode">
													{{ buttonName }}
												</el-button>
											</div>
										</el-form-item>
										<el-form-item>
                      <div class="btnClass">
                        <el-button type="primary" :loading="bindNowLoading" 
											@click.prevent="bindSubmit('bindingPhone')">立即绑定</el-button>
                      <el-button v-if="is_force_bind == 2" type="success" @click.prevent="handlePass">跳过</el-button>
                      </div>
										</el-form-item>
									</el-form>
								</div>
							</div>
						</div>
						<div style="height: 67px;
							box-sizing: border-box;
							padding-top: 15px;
							color: rgba(0, 0, 0, 0.65);
							letter-spacing: 0;
							text-align: center;
							line-height: 22px;">
							登录即视为同意 <a href="" target="_blank" style="color: #1e6fff;text-decoration: none;cursor: pointer">《亿品悦动用户协议》</a>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-box">
				<span>&#169 CopyRight 2024</span>
				<span class="border"></span>
				<span>亿品悦动 yipinkeji.cn</span>
				<span class="border"></span>
				<span>鄂ICP备20009800号</span>
				<span class="border"></span>
				<span>公司地址：湖北省武汉市江夏区光谷大道金融港A3栋2层1号</span>
				<span class="border"></span>
				<span>营业执照</span>
				<div class="tag">
					<img src="../assets/images/license-bg.png" alt="" style="width: 100%;height: 100%;">
				</div>
			</div>
		</div>
	
		<!-- <img :src="login_center_bg" class="login-center-layout" /> -->
	</div>
</template>
<script>
import login_center_bg from "@/assets/images/login_center_bg.png";

import QRCode from "qrcodejs2";

import { isvalidUsername } from "@/api/validate";
export default {
  name: "app",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空!"));
      }
      // 使用正则表达式进行验证手机号码
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号格式不正确!"));
      }
      // 自定义校验规则 需要调用callback()函数！
      callback();
    };
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        mobile: "",
        password: "",
      },
      loginRules: {
        mobile: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePass,
          },
        ],
      },
      loading: false,
      pwdType: "password",
      login_center_bg,
      dialogVisible: false,
      supportDialogVisible: false,
      name: "",
      pwd: "",

      loginMethod: "pc", // 默认为电脑登录方式
      loginType:true,
      qrcode: "",

      qrCodeImgUrl: "",
      userUuid: "",

      bindNowLoading: false,
      buttonName: "获取验证码",
      countCode: 60,
      disableCode: false,
      bindingPhone: {
        phoneNum: "",
        checkCode: "",
      },
      bindingPhoneRules: {
        phoneNum: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        checkCode: [
          { required: true, message: "验证码不能为空！", trigger: "blur" },
        ],
      },
      timerID: null,
      beoOverdue: false,
      token: "",
      is_force_bind: 2,
    };
  },

  methods: {
    handlePass() {
      this.clearTime();
      let storage = window.sessionStorage;
      storage.setItem("token", this.token);
      this.getUserInfo();
    },
    // 有新的二维码地址了，先把之前的清除掉
    createQrcode() {
      // if (this.qrcode) {
      // 	this.$refs[this.id].innerHTML = ''
      // }
      // qrCodeUrl
      // let a = new QRCode(this.$refs.qrCodeUrl, {
      // 	text: '大家好',
      // 	width: 170,
      // 	height: 170,
      // 	colorDark: 'black',
      // 	colorLight: 'white',
      // })
    },
    removeDomain(bindingPhone) {
      this.$refs[bindingPhone].validateField("phoneNum", async (valid) => {
        // this.$refs[bindingPhone].validate((valid) => {
        if (!valid) {
          // 获取验证码
          // captcha(this.form.phoneNum)

          this.$api
            .getVerificationCode({
              mobile: this.bindingPhone.phoneNum,
            })
            .then((res) => {
              if (res.code == 200) {
                // 开启计时
                const timeout = setInterval(() => {
                  if (this.countCode < 1) {
                    this.disableCode = false;
                    this.buttonName = "重发验证码";
                    this.countCode = 60;
                    clearInterval(timeout);
                  } else {
                    this.disableCode = true;
                    this.buttonName = this.countCode-- + "s后重发";
                  }
                }, 1000);
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    bindSubmit(bindingPhone) {
      this.$refs[bindingPhone].validate((valid) => {
        if (valid) {
          this.$api
            .bindPhoneNumber({
              mobile: this.bindingPhone.phoneNum,
              code: this.bindingPhone.checkCode,
              token: this.token
            })
            .then((res) => {
              if (res.code == 200) {
                this.clearTime();
                let storage = window.sessionStorage;
                storage.setItem("token", this.token);
                this.getUserInfo();
              } else {
                this.$message.error(res.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    handleLogin() {
      let storage = window.sessionStorage;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$api.login(this.loginForm).then((res) => {
            // console.log(res)
            if (res.code == "200") {
                this.clearTime();
                storage.setItem("token", res.data.token);
                this.getUserInfo();
            } else {
              this.$message.error(res.msg);
            }
            this.loading = false;
          });
        } else {
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    handleTry() {
      this.dialogVisible = true;
    },
    dialogConfirm() {
      this.dialogVisible = false;
    },
    dialogCancel() {
      this.dialogVisible = false;
    },
    queryInfoLogin() {
      this.$api
        .querUserScanCode({
          uuid: this.userUuid,
        })
        .then((res) => {
          if (res.code == 200) {
            let storage = window.sessionStorage;
            if (res.data.is_login == 1) {
              this.token = res.data.token;
              if (res.data.is_bind_mobile == 0) {
                this.loginMethod = "binding";
                this.is_force_bind = res.data.is_force_bind;
              } else {
                // 已登录且已绑定手机号
                this.clearTime();
                storage.setItem("token", res.data.token);
                this.getUserInfo();
              }
            }
            if (res.data.is_expired == 1) {
              // 二维码过期
              this.beoOverdue = true;
            }
          }
        });
    },
    getUserInfo() {
      this.$api.getUserInfo().then((res) => {
        res.data && localStorage.setItem("userInfo", JSON.stringify(res.data));
        this.$router.push("/");
      });
    },
    getOneQRCode() {
      this.beoOverdue = false;
      this.$api
        .getQRCodeImg({
          user_code:
            new URLSearchParams(window.location.href).get("user_code") || "",
        })
        .then((res) => {
          if (res.code == 200) {
            this.qrCodeImgUrl = res.data.qrcode;
            this.userUuid = res.data.uuid;
            this.queryInfoLogin();
          }
        });
    },
    setTime() {
      //设置定时器
      this.timerID = setInterval(() => {
        console.log("定时器--");
        this.queryInfoLogin();
      }, 3000);
    },

    clearTime() {
      //清除定时器
      clearInterval(this.timerID);
      this.timerID = null;
    },
  },
  mounted() {
    // this.createQrcode()
  },
  beforeDestroy() {
    this.clearTime();
  },
  created() {
    this.getOneQRCode();

    if (this.timerID === null) {
      this.setTime();
    }

    var storage = window.sessionStorage;
    let user = window.sessionStorage.getItem("token");
    if (user) {
      console.log("11223");
      this.clearTime();
      this.$router.push("/");
    }
  },
};
</script>
<style  scoped >
.login-choice-img{
  height: 70px;
  width:70px;
  cursor: pointer;
}
.box-hone {
  margin: 0 auto;
  width: 1200px;
  height: 560px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #f5f8ff;
  /* position: relative; */
  padding: 45px 64px;
  background-image: url(../assets/images/login-bg.png);
  background-size: 55%;
  /* background-position: 0px -30px; */
  background-repeat: no-repeat;
}
.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 100px auto;
  box-shadow: none;
  border:none
}

.login-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}

.footer-box {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  font-size: 13px;
  color: #898d96;
  text-align: center;
  line-height: 36px;
}
.footer-box .border {
  width: 1px;
  height: 12px;
  display: inline-block;
  margin: 0 18px;
  background: #898d96;
}
.footer-box .tag {
  width: 73px;
  height: 24px;
  display: inline-block;
  margin-left: 51px;
  /* background: url(https://sr.ffquan.cn/dtk_www/20210816/c4d2gh76vrk9qam2uml00.png) center center no-repeat;
		background-size: 100% 100%; */
}
.btnClass {
  display: flex;
}
.btnClass .el-button {
  flex: 1;
}
</style>
